<template>
    <tm-app class="app">
        <view
            style="width: 750rpx; position: fixed; z-index: 100;background:#fff;"
            :style="{
                height: systemInfo.statusBarHeight + 'px',
            }"
        ></view>

        <view
            class="slim_header d-flex a-center j-center"
            style="border-bottom:none;"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title">信息</view>
            <view class="right_box">
                <!-- <image src="/static/center/dian.png" class="dian"></image> -->
            </view>
        </view>


        <view
            class="content"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
        >
            <view class="user_msg d-flex a-center psr">
                <view class="head d-flex d-c a-center">
                    <userhead width="140" height="140" :saveKey="userDetail.id" :isVip="userDetail.isVip" :src="userDetail.photo"/>
                </view>

                <view class="d-flex d-c psr">
                    <view :class="{ isVip: !!userDetail.isVip }" class="name">{{
                        userDetail.nickName
                    }}</view>
                    <view style="color: #999; font-size: 24rpx"
                        >IP属地: {{ userDetail.province }}
                        {{ userDetail.city }}</view
                    >
                </view>

                <!-- <view
                        v-show="checked && !isFriend"
                        class="add d-flex a-center j-center h-center"
                        @tap="goApplayForFriend"
                    >
                        添加好友
                    </view> -->

                    <!-- <view
                        v-show="checked && isFriend"
                        class="liao-user"
                        @tap="contactUser"
                    >
                        <i class="icon icon-liaotian mes h-center"></i>
                        聊天
                    </view> -->
            </view>

            <view class="sign">
                    签名：{{ userDetail.signature?userDetail.signature:'这个胖友很懒，什么也没留下...' }}
            </view>

            <view class="row d-flex a-center j-between" @tap="goPangyouDetail">
                <text>查看个人主页</text>
                <i class="icon icon-more-2" style="color:#999;"></i>
            </view>

            <!-- <tm-button v-if="checked && !isFriend" class="btn_main" :width="690" style="
                            box-shadow: none;
                            background: transparent;
                            border:1px solid #29DBA3;
                        " :fontSize="32" fontColor="#29DBA3" :loading="addLoading" label="打招呼">
            </tm-button> -->
            <!-- <tm-button v-if="checked && isFriend" class="btn_main" :width="690" :shadow="0" :linear-color="['#64F1C5','#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" :loading="addLoading" @tap="contactUser" label="发起聊天"></tm-button>
            <tm-button v-if="checked && !isFriend" class="btn_main" :width="690" :shadow="0" :linear-color="['#64F1C5','#29DBA3']" linear="left" :fontSize="32" fontColor="#ffffff" :loading="addLoading" @tap="checkAddFriend" label="添加好友"></tm-button> -->

            <view class="btn_bottom_box">
                <view v-if="checked && !isFriend" class="btn_main_r" @tap="checkAddFriend">
                    <text class="text">添加好友</text>
                </view>

                <view v-if="checked && isFriend" class="btn_main_r" @tap="contactUser">
                    <text class="text">发起聊天</text>
                </view>
                <view class="bottom_seat"></view>
            </view>





        </view>

    </tm-app>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import {
    onReady,
    onShow,
    onHide,
    onLoad,
    onUnload,
    onPageScroll,
} from "@dcloudio/uni-app";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { queryUser } from "@/api/api";
import { getUserDetail1 } from "@/api/api";
import { handleJumpToChat,getUserProfile, delFriend, checkFriend,addFriend } from "@/hooks/imHooks";
import userhead from '@/components/userhead.vue'

import { userData as userDataStore } from "@/store/userData";


const userData = userDataStore();

const systemInfo: any = systemInfoStore();
const msg = ref(null);
//10000013

const userDetail = ref({});

const getDetail = async (userId: string) => {
    const res: any = await getUserDetail1({ id: userId });
    const { flag, data } = res;
    if (flag !== 1) {
        uni.showToast({
                    icon: "none",
                    title: '获取胖友详情失败',
                    duration: 1500,
                });
        return;
    }

    userDetail.value = data;
};

const goPangyouDetail = () => {
    uni.navigateTo({
        url: `/pages/personalCenter/personalCenter?userId=${userDetail.value.id}`,
    });
};

const goBack = () => {
    uni.navigateBack();
};

const contactUser = () => {
    handleJumpToChat(`C2C${userDetail.value.id}`);
};


const checked = ref(false);
const isFriend = ref(false);

const check = async (userId: string) => {
    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            check(userId);
        }, 200);
        return;
    }

    const res: any = await checkFriend([userId]);
    const { code, data } = res;
    if (code !== 0) {
        uni.showToast({
                    icon: "none",
                    title: '检查胖友关系失败~',
                    duration: 1500,
                });
        return;
    }

    checked.value = true;

    if (
        data.successUserIDList[0].relation ===
            uni.$TIM.TYPES.SNS_TYPE_BOTH_WAY ||
        data.successUserIDList[0].relation === uni.$TIM.TYPES.SNS_TYPE_A_WITH_B
    ) {
        isFriend.value = true;
    }else{
        isFriend.value = false; 
    }
};

const handleAddFirend = async()=>{
    const obj = {
        userId:userDetail.value.id,
        wording:'',
        remark:'',
        source:'Preview',
    }
    const res:any = await addFriend(obj);
    const {code,data} = res;
    if(code!==0){
        uni.showToast({
                    icon: "none",
                    title: '申请添加好友失败，请稍后再试',
                    duration: 1500,
                });
        return;
    }
    uni.showToast({
        icon: "none",
        title: '已成功添加对方为好友~',
        duration: 1500,
    });


}

const allowType = ref('');


const checkAddFriend = async ()=>{

    goApplayForFriend();

    // const res1:any = await getUserProfile([userDetail.value.id]);
    // console.log(res1.data[0].allowType)
    // // AllowType_Type_AllowAny
    // // AllowType_Type_DenyAny
    // if(res1.code===0){
    //     allowType.value = res1.data[0].allowType
    // }

    // if(allowType.value==='AllowType_Type_AllowAny'){
    //     handleAddFirend();
    // }else if(allowType.value==='AllowType_Type_DenyAny'){
    //     uni.showToast({
    //         icon: "none",
    //         title: '对方不允许任何人添加其为好友',
    //         duration: 1500,
    //     });
    // }else{
    //     goApplayForFriend();
    // }
}


const goApplayForFriend = () => {

    if(userDetail.value.id===userData.id){
        uni.showToast({
            icon: "none",
            title: "无法添加自己为好友",
            duration: 1500,
        });
        return;
    }


    uni.navigateTo({
        url: `/pages/addFriend/applyforFriend?userId=${userDetail.value.id}&from=search`,
    });
};
onLoad(async (option: any) => {

    uni.$on('friendUpdate',()=>{
        check(option.userId);
    })

    if (option.userId) {
        getDetail(option.userId);
        check(option.userId);
    }
});
</script>
<style lang="scss" scoped>
.app {
    .header {
        position: fixed;
        width: 750rpx;
        z-index: 100;
        top: 0;
        left: 0;
        padding: 0 30rpx;
        display: flex;
        height: 100rpx;
        align-items: center;
        justify-content: space-between;
        height: 100rpx;
        // position: absolute;
        // top: 0;
        // left: 0;
        width: 750rpx;
        background-color: #ffffff;

        .right {
            width: 48rpx;
            height: 48rpx;
        }

        .firend {
            font-size: 34rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #000000;
        }
    }

    .btn_main {
            display:block;
            height:80rpx;
            border-radius:40rpx;
            line-height:80rpx;
            z-index:100;
            margin:0 auto !important;
            margin-top:40rpx !important;
        }

    .search_box {
        width: 750rpx;
        position: fixed;
        background: #fff;
        padding: 20rpx 30rpx;
        height: 100rpx;
        .search {
            width: 600rpx;
            height: 60rpx;
            border-radius: 30rpx;
            background: #f5f5f5;
            padding: 0 30rpx;
            .inp {
                width: 570rpx;
                margin-left: 20rpx;
                font-size: 25rpx;
            }
        }

        .text_btn {
            text-align: right;
            color: #1dc691;
            &:active {
                opacity: 0.7;
            }
        }
    }

    .content {
        position: absolute;
        width: 750rpx;
        bottom: 0;
        left: 0;
        padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
        padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
        .title {
            font-size: 28rpx;
            color: $slim-text3;
            height: 50rpx;
            padding: 0 30rpx;
        }

        .user_msg {
            padding: 30rpx;
            background: #fff;
            gap: 20rpx;
        }

        .head {
            position: relative;
            width: 140rpx;
            height: 140rpx;
            .img {
                width: 140rpx;
                height: 140rpx;
                border-radius: 50%;
            }

            .vip {
                position: absolute;
                width: 97rpx;
                height: 43rpx;
                z-index: 5;
                bottom: -10rpx;
            }
        }

        .name {
            color: $slim-text3;
            font-size:32rpx;
            &.isVip {
                color: #f19945;
            }
            margin-bottom: 20rpx;
        }

        .row{
            height:80rpx;
            background:#fff;
            padding:0 30rpx;
            font-size:30rpx;
            color:$slim-text3;
            &:active{
                background:#f5f5f5;
            }
        }

        .add{
                        position: absolute;
                        right: 20rpx;
                        width: 192rpx;
                        height: 60rpx;
                        background: linear-gradient(270deg, #4EE5C8 0%, #1FC994 100%);
                        border-radius: 40rpx;
                        font-size:28rpx;
                        color:#fff;
                        &:active{
                            opacity: .7;
                        }
                    }
                    .liao-user {
                        position: absolute;
                        right: 20rpx;
                        width: 192rpx;
                        height: 60rpx;
                        border-radius: 40rpx;
                        border: 2rpx solid #1dc691;
                        font-size: 28rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #1dc691;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .mes {
                            font-size:40rpx;
                            margin-right: 10rpx;
                        }

                        &:active{
                            opacity:.7;
                        }
                    }

        .sign{
            padding:0 30rpx;
            background:#fff;
            padding-bottom:20rpx;
            color:#999;
            font-size:28rpx;
        }
    }
}
</style>    